@charset"UFT-8";
$fontSize:40;   
@function r($p) {
    @return $p/$fontSize*1rem;
}
*{
    font-size: 0;
}
html,body{
    height: 100%;
    width: 100%;
} 
html{
    font-size: 40px;
}
.web{
    >.content{
        margin: 0 auto;
        >.first{
             width: 85%;
             margin: 0 auto;
            padding-top: r(41);
            padding-bottom: r(87);
            >p{
                margin-bottom: r(39);
                font-size: 30px;
                color: #ff6b08;
            }
            >ul{
                display: flex;
                justify-content: space-between;
                >li{
                    width: 30%;
                    overflow: hidden;
                    position: relative;
                    border-radius: 4px;
                    cursor: pointer;
                    border: solid 1px #eeeeee;
                    >img{
                        width: 100%;
                    }
                    >div{
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        height: 24%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: r(14);
                        color: #ffffff;
                        background-color: #000000;
                        opacity: 0.6;
                        transition: all .4s;
                        transform: translateX(-100%);
                    }
                }
                >li:hover>div{
                    transform: translateX(0);
                    
                }
                
            }
        }
        >.second{
             width: 85%;
             margin: 0 auto;
            >ul{
            >li{
                margin-bottom: r(38);
                display: flex;
                justify-content: space-between;
                >.img{
                    width: 27%;
                    overflow: hidden;
                    cursor: pointer;
                    >img{
                        width: 100%;
                        transition: all .4s;
                    }
                    >img:hover{
                        transform: scale(1.2);
                    }
                }
                >.right{
                    width: 70%;
                    position: relative;
                    padding-bottom: r(48);
                    >p:first-of-type{
                        color: #666666;
                        font-size: 18px;
                        margin-bottom: 17px;
                        cursor: pointer;
                    }
                    >p:nth-of-type(2){
                        color: #2a2a2a;
                        font-size: 14px;
                        margin-bottom: 22px;
                        cursor: pointer;
                    }
                    >p:last-of-type{
                        color: #2a2a2a;
                        font-size: 14px;
                        cursor: pointer;
                    }
                    >p:hover{
                        color: #ff6900;
                    }
                    >div{
                        border-radius: 15px;
                        font-size: 14px;
                        width: 98px;
                        height: 32px;
                        text-align: center;
                        line-height: 32px;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        cursor: pointer;
                        color: #ff6900;
                        border: solid 1px #ff6900;
                    }
                    >div:hover{
                        border-radius: 15px;
                        font-size: 14px;
                        color: white;
                        background-color: #ff6900;
                        border: solid 1px #ff6900;
                    }
                }
            }
        }
        }
        >.third{
            margin: 0 auto;            
             width: 85%;
            >nav{
                display: flex;
                justify-content: center;
                >ul{
                    >li{
                        >span{
                            font-size: 12px;
                            color: #2a2a2a;
                            >span{
                                font-size: 12px;
                                color: #2a2a2a;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media(max-width:768px){
    .first{
        width: 92% !important;
        >ul{
            >li{
                >div{
                    height: 100% !important;
                    padding: 10px;
                }
            }
        }
    }
    .second{
        width: 92% !important;
        >ul{
            >li{
                margin-bottom: 38px;
                >.img{
                    width: 34% !important;
                }
                >.right{
                    width: 63% !important;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-between;
                    padding: 0 !important;
                    >p:last-of-type{
                        display: none !important;
                    }
                    >p{
                        width: 100% !important;
                        margin: 0 !important;
                    }
                }
            }
        }
    }
    .third{
        width: 92% !important;
    }
    
}
